.cr-bgimg div span {
  width: 100%;
  height: 100%;
  position: absolute;
  left: -150px;
  top: 0;
  z-index: 2;
  text-indent: -9999px;
  background-repeat: no-repeat;
  transition: left 0.5s ease-in-out;
}

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1) {
  background: url('../images/1.jpg');
}

.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2) {
  background: url('../images/2.jpg');
}

.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3) {
  background: url('../images/3.jpg');
}

.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4) {
  background: url('../images/4.jpg');
}

.cr-bgimg div:nth-child(1) span {
  background-position: 0 0;
}

.cr-bgimg div:nth-child(2) span {
  background-position: -150px 0;
}

.cr-bgimg div:nth-child(3) span {
  background-position: -300px 0;
}

.cr-bgimg div:nth-child(4) span {
  background-position: -450px 0;
}

.cr-container input:checked ~ .cr-bgimg span {
  animation: slideout 0.6s ease-in-out;
}

@keyframes slideout {
  0% {
    left: 0;
  }
  100% {
    left: 150px;
  }
}

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container
  input.cr-selector-img-4:checked
  ~ .cr-bgimg
  div
  span:nth-child(4) {
  z-index: 10;
  left: 0;
  animation: none;
}

.cr-titles h3 {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #fff;
  opacity: 0;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  z-index: 10000;
  top: 50%;
  transition: opacity 0.8s ease-in-out; /* 图片字体过渡 */
}

.cr-titles h3 span:nth-child(1) {
  display: block;
  font-size: 70px;
  font-family: BebasNeue, 'Arial Narrow', Arial, sans-serif;
  letter-spacing: 7px;
}

.cr-titles h3 span:nth-child(2) {
  display: block;
  font-size: 14px;
  padding: 10px;
  background: rgba(104, 171, 194, 0.9);
  font-family: Calibri, Palatino, 'Palatino Linotype', 'Palatino LT STD';
  letter-spacing: 0;
  font-style: italic;
}

.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) {
  opacity: 1;
}
